<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS3的新特性</title>
    <style>
      /* 属性选择器 */

      /* 1.必须是input但是同时具有value这个属性 选择这个元素 [] */
      /* input[value] {
        color: pink;
      } */

      /* 2.只选择 type="text" 文本框的 input 选取出来*/
      /* input[type="text"] {
        color: pink;
      } */

      /* 3.选择首先是 div 然后具有 class 属性 并且属性值 必须是 icon 开头的这些元素 */
      /* div[class^="icon"] {
        color: red;
      } */

      /* 4. 具有 class 属性 并且属性值 必须是 data 结尾的这些元素*/
      /* section[class$="data"] {
        color: aqua;
      } */

      /* 结构伪类选择器 */

      /* 1.选择ul里面的第一个孩子 小li */
      /* ul li:first-child {
        background-color: pink;
      } */

      /* 2.选择ul里面的最后一个孩子 小li */
      /* ul li:last-child {
        background-color: red;
      } */

      /* 3.选择ul里面的第2个孩子 小li */
      /* ul li:nth-child(2) {
        background-color: green;
      } */

      /* ul li:nth-child(6) {
        background-color: green;
      } */

      /* nth-child伪类选择器 */

      /* 1.把所有的偶数 even的孩子选出来 */
      /* ul li:nth-child(even) {
        background-color: aquamarine;
      } */

      /* 2.把所有的奇数 odd的孩子选出来 */
      /* ul li:nth-child(odd) {
        background-color: #ccc;
      } */

      /* 3.nth-child(n)  n从 0 开始 每次加 1 往后面计算 这里面必须是n，不能是其他的字母 */
      /* 选择所有孩子 小括号里面只能是 n 这个字母 */
      /* ol li:nth-child(n){
         background-color: cornflowerblue;
      } */

      /* 4.nth-child(2n)选择所有的偶数孩子 等价于 even */
      /* ol li:nth-child(2n) {
        background-color: rgb(206, 44, 168);
      } */

      /* 5.nth-child(2n+1)选择所有的奇数孩子 等价于 odd */
      /* ol li:nth-child(2n + 1) {
        background-color: rgb(133, 208, 231);
      } */

      /* 从第三个开始往后选择 */
      /* ol li:nth-child(n + 3) {
        background-color: bisque;
      } */

      /* 从第三个开始往前选择 */
      /* ol li:nth-child(-n + 3) {
        background-color: rgb(35, 195, 91);
      } */

      /* nth-of-type选择器 */
      /* ul li:first-of-type {
        background-color: aqua;
      }

      ul li:last-of-type {
        background-color: red;
      }

      ul li:nth-of-type(even) {
        background-color: pink;
      } */

      /* nth-child(n) 和 nth-of-type(n) 的区别 */
      /* 
      nth-child 会把所有的盒子都排列序号
      执行的时候首先看 :nth-child(1) 之后会去看 前面的div(标签选择器)  是否合法
       */
      /* section div:nth-child(1) {
        background-color: red;
      } */

      /* 
      nth-of-type 会把指定的盒子都排列序号
      执行的时候首先看 div(标签选择器)指定的元素 之后会去看 :nth-of-type(1) 第几个孩子 是否合法
      */
      /* section div:nth-of-type(1) {
        background-color: aquamarine;
      } */

      /* 伪元素选择器 */
      /* div {
        width: 200px;
        height: 200px;
        background-color: pink;
      } */
      /* div::before 权重是 2 */
      .is::before {
        /* 伪元素选择器创建的是行内元素，无法定义宽和高 */
        display: inline-block;
        /* 这个content是必须写的 */
        content: "我";
        width: 30px;
        height: 40px;
        background-color: aqua;
      }
      .is::after {
        content: "胡桃";
      }

      /* 盒子模型 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .boxx {
        width: 200px;
        height: 200px;
        background-color: aqua;
        border: 20px solid red;
        padding: 15px;
        /* css3 盒子模型 盒子最终的大小就是 width 200px 的大小 */
        /* box-sizing: border-box; */
      }

      /* css3滤镜 filter */
      img {
        width: 200px;
        height: 200px;
        filter: blur(5px);
      }
      img:hover {
        filter: blur(0);
      }

      /* calc函数 */
      .father {
        width: 300px;
        height: 200px;
        background-color: pink;
      }
      .son {
        width: calc(100% - 30px);
        height: 30px;
        background-color: aqua;
      }

      /* 过渡(重点) */
      .guodu {
        width: 200px;
        height: 100px;
        background-color: pink;
        /* 谁过渡谁加 transtion */
        /* transition: width 1s; */
        /* 让多个属性过渡 */
        /* transition: width 1s, height 1s; */
        /* 让所有属性过渡 */
        transition: all 1s;
      }
      .guodu:hover {
        width: 400px;
        height: 200px;
        background-color: aqua;
      }

      .re {
        width: 300px;
        border: 2px solid;
        padding: 10px 40px;
        margin: 100px;
        /* 垂直拉伸 */
        /* resize: vertical; */
        /* 水平拉伸 */
        /* resize: horizontal; */
        /* 全拉伸 */
        resize: both;
        overflow: auto;
      }

      .ouof {
        margin: 100px;
        width: 150px;
        padding: 10px;
        height: 100px;
        border: 2px solid black;
        outline: 2px solid red;
        /* outline-offset: 15px; */
        outline-offset: -15px;
      }
    </style>
  </head>
  <body>
    <!-- 属性选择器 -->
    <!-- 语法：标签选择器[属性选择器]{} -->
    <!-- 注意：类选择器、属性选择器、伪类选择器，权重都为 10 -->
    <!-- 1.利用属性选择器就可以不用借用与类或id选择器 -->
    <!-- <input type="text" name="" id="" value="请输入用户名" />
    <input type="text" name="" id="" /> -->

    <!-- 2.属性选择器还可以选择属性=值的某些元素  重点掌握-->
    <!-- <input type="text" name="" id="" />
    <input type="password" name="" id="" />
    <br /> -->

    <!-- 3.属性选择器可以选择属性值开头的某些元素 -->
    <!-- <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>我是打酱油的</div>
    <br /> -->

    <!-- 4.属性选择器可以选择属性值结尾的某些元素 -->
    <!-- <section class="icon1-data">我是胡桃</section>
    <section class="icon2-data">我是心海</section>
    <section class="icon3-ico">哪是我</section> -->

    <!-- 结构伪类选择器 -->
    <!-- 
        nth-child(n) 选择某个父元素的一个或多个特定的子元素
          n可以是数字，关键字和公式
          n如果是数字，就是选择第 n 个子元素，里面的数字从1开始...
          n可以是关键字：even偶数, odd奇数

     -->
    <!-- <ul>
      <li>我是第1个孩子</li>
      <li>我是第2个孩子</li>
      <li>我是第3个孩子</li>
      <li>我是第4个孩子</li>
      <li>我是第5个孩子</li>
      <li>我是第6个孩子</li>
      <li>我是第7个孩子</li>
      <li>我是第8个孩子</li>
    </ul>

    <ol>
      <li>我是第1个孩子</li>
      <li>我是第2个孩子</li>
      <li>我是第3个孩子</li>
      <li>我是第4个孩子</li>
      <li>我是第5个孩子</li>
      <li>我是第6个孩子</li>
      <li>我是第7个孩子</li>
      <li>我是第8个孩子</li>
    </ol> -->

    <!-- 
        nth-child(n) 和 nth-of-type(n) 的区别
        1.nth-child对父元素里面所有孩子排序选择(序号是固定的) 先找到第 n 个孩子，然后看看是否和 E(标签选择器)匹配
        2.nth-of-type对父元素里面指定子元素进行排序选择 先去匹配E(标签选择器)，然后再根据E(标签选择器)找第 n 个孩子
     -->
    <!-- <section>
      <p>光头强</p>
      <div>熊大</div>
      <div>熊二</div>
    </section> -->

    <!-- 伪元素选择器 -->
    <!-- 
        ::before 在元素内部的前面插入内容
        ::after  在元素内部的后面插入内容

        注意：
          before和after创建一个元素，但是属于行内元素
          新创建的这个元素在文档中是找不到的，所以我们称为伪元素
          语法：element::before{}
          before 和 after 必须有 content属性
          before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
          伪元素选择器和标签选择器一样，权重都为 1 
     -->

    <!-- <div class="is">是</div> -->

    <!-- 盒子模型 -->
    <!-- <div class="boxx">影</div> -->

    <!-- css3滤镜 filter -->
    <!-- 
      filter CSS属性将模糊或颜色偏移等图形效果应用于元素
      filter: 函数(); 例如： filter:blur(5px); blur模糊处理 数值越大越模糊
      
      calc()此CSS函数让你在声明CSS属性值时执行一些计算
      width: calc(100% - 80px);
      括号里面可以使用 + - * / 来计算
    -->
    <!-- <img src="../image/image1.00.webp" alt="" />

    <div class="father">
      <div class="son"></div>
    </div> -->

    <!-- 过渡(重点) -->
    <!-- 
      transtion: 要过渡的属性 花费时间 运动曲线 何时开始
      1.属性：想要变化的css属性，宽度 高度 背景颜色 内外边距都可以。如果所有的属性都变化过渡，写一个 all 就可以了
      2.花费时间：单位是秒(必须写单位) 比如 0.5s
      3.运动曲线：默认是 ease(可以省略)
      4.何时开始：单位是秒(必须写单位)可以设置延迟触发时间 默认是 0s(可以省略)

      要添加多个样式的变换效果，添加的属性由逗号分隔
      transition-property  规定应用过渡的 CSS 属性的名称。
      transition-duration  定义过渡效果花费的时间。默认是 0
      transition-timing-function  规定过渡效果的时间曲线。默认是 "ease"
      transition-delay  规定过渡效果何时开始。默认是 0。
     -->
    <!-- <div class="guodu"></div> -->

    <!--  resize:horizontal|vertical|both;-->
    <!-- <div class="re">调整属性指定一个元素是否由用户可调整大小的。</div> -->

    <!-- 
      outline-offset
      outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
      轮廓与边框有两点不同：
            轮廓不占用空间
            轮廓可能是非矩形
     -->
    <div class="ouof">这个 div有一个轮廓边界15 px边境外的边缘。</div>
  </body>
</html>
